<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
            // 要求用户名必须是2 - 20个字母
            function checkName() {
            var rexpName = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/;
            if (rexpName.test($("userName").value)) {
            $("nameSpan").innerHTML = "验证通过";
            $("nameSpan").style.color = "green";
            return true;
        } else {
            $("nameSpan").innerHTML = "姓名必须是两个以上的字母或汉字";
            $("nameSpan").style.color = "red";
            return false;
        }
        }
            // 密码必须是6位数字
            function checkPwd() {
            var rexpPwd = /^\d{6}$/;
            if (rexpPwd.test($("passWord").value)) {
            $("pwdSpan").innerHTML = "验证通过";
            $("pwdSpan").style.color = "green";
            return true;
        } else {
            $("pwdSpan").innerHTML = "密码必须是六位数字";
            $("pwdSpan").style.color = "red";
            return false;
        }
        }
            // 电话号码必须是13、15、18开始的11位数字
            function checkPhone() {
            var rexpPhone = /^1[358][0-9]{9}$/;
            if (rexpPhone.test($("phone").value)) {
            $("phoSpan").innerHTML = "验证通过";
            $("phoSpan").style.color = "green";
            return true;
        } else {
            $("phoSpan").innerHTML = "电话号码有误";
            $("phoSpan").style.color = "red";
            return false;
        }
        }
             // 电子邮件必须是XX@XX.com格式
            function checkMail() {
            var rexpMail = /^\w{2}@\w{2}.com$/;
            if (rexpMail.test($("mail").value)) {
            $("mailSpan").innerHTML = "验证通过";
            $("mailSpan").style.color = "green";
            return true;
        } else {
            $("mailSpan").innerHTML = "邮箱格式有误";
            $("mailSpan").style.color = "red";
            return false;
        }
        }
            //提交
            function right() {
            if (checkPwd() == checkPhone() && checkMail() && checkName()) {
            alert("提交成功")
        } else {
            alert("提交失败")
        }
        }
        function $(id){
            return document.getElementById(id);
        }

    </script>
</head>
<body>
<form action="add">
    用户名：<input type="text" id="userName" onblur="checkName()">
    <span id="nameSpan"></span><br>
    密码：<input type="text" id="passWord" onblur="checkPwd()">
    <span id="pwdSpan"></span><br>
    电子邮件：<input type="text" id="mail" onblur="checkMail()">
    <span id="mailSpan"></span><br>
    生日：<input type="date"><br>
    电话：<input type="text"  id="phone" onblur="checkPhone()">
    <span id="phoSpan"></span><br>
    <input type="button" value="提交" onclick="right()">
</form>
</body>
</html>